<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/config.css">
		<style>
			body{
				background: #333333;
				color: #fff;
			}
			@media screen and (max-width: 800px) {
				.masonry {
					column-count: 2; // two columns on larger phones
				}
			}

			@media screen and (max-width: 500px) {
				.masonry {
					column-count: 1; // two columns on larger phones
				}
			}
			.head {
				width: 100vw;
				height: 6vh;
				float: left;
				background: #000000;
				font-size: 6vw;
				line-height: 6vh;
				text-align: center;
				box-shadow:inset 0 0 10px #0f0;
				border: #007AFF 1px solid;
				position: fixed;
				top: 0;
				color: #007AFF;
				z-index: 99;

			}
			.masonry {
				-moz-column-count: 2;
				/* Firefox */
				-webkit-column-count: 2;
				/* Safari 和 Chrome */
				column-count: 2;
				-moz-column-gap: 2vw;
				-webkit-column-gap: 2vw;
				column-gap: 2vw;
				width: 100%;
				margin: 1vw auto;
			}

			.item {
				box-shadow:inset 0 0 10px #0f0;
				border: #007AFF 1px solid;
				border-radius: 1vw;
				font-size: 4vw;
				padding: 2vw;
				margin-bottom: 2vw;
				-moz-page-break-inside: avoid;
				-webkit-column-break-inside: avoid;
				break-inside: avoid;
				background: rgba(155,133,144,0.5);
				position: relative;
			}
			.images {
				border-radius: 1vw;
			}
			.user-parent {
				position: relative;
				margin-top: 1vw;
				}
			.user-heard {
				
				position: absolute; top: 0vw; left: 2.5rem; margin-top: 1vw;width: 30vw; overflow: hidden;
			}
			.user-icon {
				margin-top: 1vw; border-radius: 20vw;
				border:1px deepskyblue solid; 
			}
			.user-name {
				font-size:1vw;
			}
			.user-time {
				line-height: 2vw;
				font-size:0.4vw; color: #C0C0C0;
			}
			.mui-content {
				background: #333333;

			}
			.edit{
				position: absolute;
				right: 2vw;
				bottom: 2vw;
				font-size: 1vw;
				
				z-index: 99999;
			}
			.edit span{
				font-size: 6vw
			}
			.span1 {
				color: #0080FF;
			}
			.span2 {
				color: #EA0000;
			}
			
			.modalDIY{
			  position: fixed;
			  z-index: 9999999;
			  top: 0;
			  left: 0;
			  width: 100vw;
			  height: 100vh;
			  overflow: hidden;
			  background: rgba(0,
			  0,
			  0,
			  0.6);
			  display: flex;
			  align-items: center;
			  align-content: center;
			  justify-content: center;
			}
			.bg{
			  background: #fff;
			  border-radius: 10px;
			  width: 90%;
			}
			.modalTitle{
			  margin-top: 3vw;
			  margin-bottom: 3vw;
			  text-align: center;
			  padding: 30rpx 40rpx 0 40px;
			  font-size: 5vw;
			  line-height: 55px;
			  color: #000;
			}
			.modalContent{
			  z-index: 99;
			  display: flex;
			  flex-flow: row wrap;
			  justify-content: space-between;
			  box-sizing: border-box;
			  height: 30vh;
			  padding: 5vw;
			  overflow: auto;
			  font-size: 40px;
			  color: #7a7a7a;
			}
			.modalOperate{
			  text-align: center;
			  height: 50px;
			  z-index: 999;
			  line-height: 50px;
			  border-top: 2rpx solid #eee;
			  display: flex;
			  border-top: #000000 solid 1px;
			}
			.cancelBtn{
			  background: #222222;
			  font-size: 4vw;
			  flex: 1;
			}
			.comfirmBtn{
			  background: #222222;
			  font-size: 4vw;
			  flex: 1;
			}
			.space{
			  color: #000000;
			  margin-bottom: 5vw;
			}
			.modalText{
			  height: 40px;
			  line-height: 40px;
			  font-size: 20px;
			  flex: 0 0 20%;
			}
			.modalInput-title {
			  height: 40px;
			  flex: 0 0 80%;
			  padding-left: 3vw;
			}
			.modalInput-message {
			  height: 88px;
			  flex: 0 0 80%;
			  overflow: auto;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: #000000; ">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: #FFFFFF;">我的分享</h1>
		</header>
		<div id="refreshContainer" class=" mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div id="masonry" class="masonry">

					<!-- more items -->
				</div>
			</div>
		</div>

		<div id="modal" class="modalDIY mui-hidden">
			<div class="bg">
				<span class=""></span>
				<div class="modalTitle">修改分享</div>
				<div class="modalContent">
					<div class="modalText">标题:</div>
					<input id="title" class="modalInput-title" maxlength="30" value="" placeholder="请输入标题" />
					<div class="modalText">内容:</div>
					<textarea id="modalInput-message" class="modalInput-message" maxlength="200" value="" placeholder="请输入内容"></textarea>

				</div>
				<div class="modalOperate">
					<div id="_resetbtn" class="cancelBtn">取消</div>
					<div id="_comfirm" class="comfirmBtn">确定</div>
				</div>
			</div>
		</div>
		<div id="modal2" class="modalDIY mui-hidden">
			<div class="bg">
				<span class=""></span>
				<div class="modalTitle">是否确定删除？</div>
				<div class="modalOperate">
					<div id="_resetbtn2" class="cancelBtn">取消</div>
					<div id="_comfirm2" class="comfirmBtn">确定</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/mui.js"></script>
	<script src="../../js/jquery-1.4.2.min.js"></script>
	<script src="../../js/template-web.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/config.js"></script>
	<script type='text/html' id="tab-message">
		{{each rows}}
		 <div class="item" >
		 {{if user($value.userRespVo.userId) }}
		 <div class="edit"><span onclick="edit({{$value}})" class="mui-icon mui-icon-compose span1"></span><span class="mui-icon mui-icon-trash span2"  onclick="deleted({{$value.id}})"></span></div>
		 {{ /if }}
		 	<div class="item_content" id="{{$value.id}}" data = "{{$value}}">
		 		<img class="images" src="{{$value.imageRecognitionRespVo.imagePath}}" width="100%" />
		 		<div>{{$value.title}}</div>
		 		<div class="user-parent" style="position: relative;">
		 			<img class="user-icon" src="{{$value.userRespVo.headImageUrl}}" onerror="javascript:this.src='../../images/nickname.png'" width="30px" height="30px">
		 			<div class="user-heard">
		 				<div class="user-name">{{$value.userRespVo.nickname}}</div>
		 				<div class="user-time">{{$value.createdTime}}</div>
		 			</div>
		 		</div>
		 	</div> 
		 </div>
		 {{/each}}
	</script>
	<script type="text/javascript">
		mui.init({
			pullRefresh: {
				container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				down: {

					style: 'circle',
					callback: pulldownRefresh
				},
				up: {
					auto: true,
					style: 'circle',
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});

		options = {
			scrollY: true, //是否竖向滚动
			scrollX: false, //是否横向滚动
			startX: 0, //初始化时滚动至x
			startY: 0, //初始化时滚动至y
			indicators: true, //是否显示滚动条
			deceleration: 0.5, //阻尼系数,系数越小滑动越灵敏
			bounce: true //是否启用回弹
		}




		var user = app.getUserInfo();
		var count = 0;
		var pase = {
			"page": 0,
			"rows": 10,
			"createdBy": user.userId,
		};

		function init(data) {
			mui.ajax(app.getUrl() + "invitationContent/findPage", {
				type: 'POST',
				dataType: 'json',
				contentType: "application/json;charset=UTF-8",
				data: data,
				success: function(res) {
					if (res.errCode === "000000") {
						htmlstr = template('tab-message', res.data);
						var tul = document.getElementById("masonry");
						tul.innerHTML += htmlstr;
						if (res.data.total < pase.rows || res.data.rows.length <= 0) {
							mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
						}
					}
				},
				error: function(res) {
					mui.alert('与服务器断开连接!请重新登录', function() {
						// plus.webview.getWebviewById("index").close();
					});
				}
			});
		}

		function pullupRefresh() {
			pase.page += 1;
			init(pase);
			mui('#refreshContainer').pullRefresh().endPullupToRefresh(count > 0);
		}

		/**
		 * 下拉刷新具体业务实现
		 */
		function pulldownRefresh() {
			var tul = document.getElementById("masonry");
			count = 0;
			tul.innerHTML = "";
			pase.page = 0;
			init(pase);
			mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
			mui('#refreshContainer').pullRefresh().refresh(true);

		}


		mui.plusReady(function() {
			mui("#masonry").on('tap', '.item_content', function() {
				var data = this.getAttribute("data");
				console.log(data);
				localStorage.setItem("shareDetailed", data);

				var html = '../share/share_detailed.html';
				var id = 'share_detailed';
				w = plus.webview.create(html, id, {
					hardwareAccelerated: true,
					scrollIndicator: 'none',
					scalable: true,
					bounce: 'all'
				});
				w.show('pop-in');

			});


			template.defaults.imports.user = function(userId) {
				return userId == app.getUserInfo().userId;
			}
		});
		var deletedId = "";
		var dataparse = {};
		function edit(data) {
			var title = document.getElementById("title");
			var message = document.getElementById("modalInput-message");
			console.log(data.title)
			title.value = data.title;
			message.innerHTML = data.message;
			dataparse.id = data.id;
			modal.classList.remove("mui-hidden");
		}

		function deleted(id) {
			deletedId = id;
			modal2.classList.remove("mui-hidden");
		}


		var modal = document.getElementById("modal");
		var modal2 = document.getElementById("modal2");
		var _resetbtn = document.getElementById("_resetbtn");
		var _comfirm = document.getElementById("_comfirm");
		_resetbtn.addEventListener('click', function() {
			modal.classList.add("mui-hidden");
		});
		_comfirm.addEventListener('click', function() {
			var title = document.getElementById("title");
			var message = document.getElementById("modalInput-message");
			dataparse.title = title.value;
			dataparse.message = message.value;

			mui.ajax(app.getUrl() + "invitationContent/modify", {
				type: 'POST',
				dataType: 'json',
				contentType: "application/json;charset=UTF-8",
				data: dataparse,
				async: true,
				timeout: 100000, //超时时间设置为10秒；
				beforeSend: function() {
					plus.nativeUI.showWaiting("修改中...", "options");
					mask.show();
				},
				complete: function() {
					plus.nativeUI.closeWaiting();
					mask.close(); //关闭遮罩层
				},
				success: function(res) {

					if (res.errCode === "000000") {
						modal.classList.add("mui-hidden");
						mui.toast('修改成功!', {
							duration: 'long',
							type: 'div'
						})
						pulldownRefresh();
					} else {
						mui.toast('修改失败!', {
							duration: 'long',
							type: 'div'
						})
					}
				},
				error: function(res) {
					modal.classList.add("mui-hidden");
					mui.alert('与服务器断开连接!请重新登录', function() {
						closeAll();
					});
				}
			});

		});


		var _resetbtn2 = document.getElementById("_resetbtn2");
		var _comfirm2 = document.getElementById("_comfirm2");
		_resetbtn2.addEventListener('click', function() {
			modal2.classList.add("mui-hidden");
		});

		_comfirm2.addEventListener('click', function() {
			mui.ajax(app.getUrl() + "invitationContent/remove", {
				type: 'POST',
				dataType: 'json',
				contentType: "application/json;charset=UTF-8",
				data: String(deletedId),
				async: true,
				timeout: 100000, //超时时间设置为10秒；
				beforeSend: function() {
					plus.nativeUI.showWaiting("删除中...", "options");
					mask.show();
				},
				complete: function() {
					plus.nativeUI.closeWaiting();
					mask.close(); //关闭遮罩层
				},
				success: function(res) {
					console.log(res)
					if (res.errCode === "000000") {
						mui.toast('删除成功!', {
							duration: 'long',
							type: 'div'
						})
						modal2.classList.add("mui-hidden");
						pulldownRefresh();
					} else {
						mui.toast('删除失败!', {
							duration: 'long',
							type: 'div'
						})
					}
				},
				error: function(res) {
					modal.classList.add("mui-hidden");
					mui.alert('与服务器断开连接!请重新登录', function() {
						closeAll();
					});

				}

			});
		});
	</script>
</html>
